<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        v-model="form"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @search-reset="searchReset"
        @current-change="currentChange"
       >
        <template slot="msgTitle" slot-scope="scope">
         <span class="table-title" @click="handleDetail(scope.row.msgId)">
           <i :class="scope.row.receiverReadStatus == 1?'title-read':'title-unread'"></i>
           {{scope.row.msgTitle}}
         </span>
        </template>
        <template slot="receiverReadStatus" slot-scope="scope">
          <el-tag :type="scope.row.receiverReadStatus == 1 ? '' : 'danger'">{{scope.row.receiverReadStatus == 1 ? '已读' : '未读'}}</el-tag>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-view" @click="handleDetail(scope.row.msgId)">查看详情</el-button>
        </template>

      </avue-crud>

    </basic-container>


    <msg-detail :show.sync="showDraw" :msgId="msgId" @updateList="updateList"></msg-detail>

  </div>
</template>

<script>
  import {addObj, getObj, fetchList, markObj} from '@/api/message/my-msg'
  import {tableOption} from '@/const/crud/message/my-msg'
  import msgDetail from './detail'

  export default {
    name: 'message',
    components:{msgDetail},
    data() {
      return {
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        tableLoading: false,
        tableOption: tableOption,

        form:{
          sendRule: '',
          sysMsgRecievers: [],
        },

        msgId: '',
        showDraw: false,
      }
    },
    created() {

    },
    mounted () {
      let showId = this.$route.query.msgId
      if (showId){
        this.handleDetail(showId)
        this.$router.push({path:'/myMessage/index',query:{}})
      }
    },
    computed: {
    },
    methods: {
      getList(page, params) {
        this.tableLoading = true
        fetchList(Object.assign({
          descs: 'create_time',
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm)).then(response => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        }).catch(err => {
          this.tableLoading = false
        })
      },
      handleDetail(id) {
        this.showDraw = true
        this.msgId = id
        // this.$refs.crud.rowEdit(row, index)
      },
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      searchReset() {
        this.searchForm = {}
        this.page.currentPage = 1
        this.getList(this.page)
      },
      refreshChange() {
        this.getList(this.page)
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },

      updateList(){
        this.getList(this.page)
      },

    }
  }
</script>
<style lang="scss" scoped>
  .table-title{
    cursor: pointer;
    .title-unread{
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #F56C6C;
      margin-right: 5px;
    }
    .title-read{
      display: inline-block;
      width: 8px;
      margin-right: 5px;
    }
  }

</style>
